<template>
    <el-container>
        <!-- Header -->
         <Header></Header>
        <el-container>
           <!-- asider -->
            <Asider></Asider>
            <!-- Main 内容区域 -->
            <Main>
            <template #main>
                  <MainSmtpInfo></MainSmtpInfo>
            </template>
        </Main>
        </el-container>
        <!-- 抽屉 Aside (小屏时使用) -->
        <AsideDrawer></AsideDrawer>
        <!-- Footer 固定在底部 -->
        <Footer></Footer>
    </el-container>

</template>

<script setup>
import Header from "@/layout/Header.vue";
import Asider from "@/layout/Asider.vue";
import Main from "@/layout/Main.vue";
import Footer from "@/layout/Footer.vue";
import AsideDrawer from "@/layout/AsideDrawer.vue";
import MainSmtpInfo from "@/components/MainSmtpInfo.vue";
import { onMounted } from "vue";
import { useStore } from 'vuex';
const store = useStore();

// 检测屏幕宽度
const handleResize = () => {
    let screenWidth = window.innerWidth;
    let isMobile = screenWidth < 768; // 小屏幕阈值
    store.commit('mobile/setShowFileOrDirDate', !isMobile)
    store.commit('mobile/setShowFileOrDirSize', !isMobile)
    store.commit('mobile/setIsMobile', isMobile)
    if (isMobile) {
        store.commit('mobile/setMainStyle', "left:0px;")
    } else {
        store.commit('mobile/setMainStyle', "left:200px;")
    }
};

onMounted(() => {
    handleResize();
    window.addEventListener("resize", handleResize);
});

</script>

<style scoped lang="scss">
</style>
